import React from 'react';
import {Drawer} from 'antd';
import SiderMenu from './SiderMenu';
import BaseComponent from '../Base/BaseComponent';

import {connect} from 'react-redux';
import {withRouter} from 'react-router-dom';
import * as Img from "../../resources";
import styles from './index.module.css'
import {SystemConfig} from "../../router/router";

class Besider extends BaseComponent {
    constructor() {
        super();
    }

    render() {
        return this.props.isMobile ? (
            <Drawer
                closable={true}
                visible={this.props.drawerVisible}
                placement={'left'}
                onMaskClick={() => {
                    this.onSetValueToStore(['root', 'app', 'drawerVisible'], false);
                }}
                onClose={() => {
                    this.onSetValueToStore(['root', 'app', 'drawerVisible'], false);
                }}
                width="256px"
            >
                <div className="logo flex-box" style={{borderBottom: '1px solid #eee'}}>
                    <div className={styles.logoInfor}>
                        <img className="logo-img" src={Img.Logo} style={{marginBottom:'0.2rem',marginTop:'-.15rem'}}/>
                        <h4 className="logo-text" style={{marginTop: '.1rem'}}>{SystemConfig.systemShortName}</h4>
                    </div>
                </div>

                <SiderMenu {...this.props} collapsed={false} inDrawer={true}/>
            </Drawer>
        ) : (
            <SiderMenu {...this.props} />
        )
    }
}

export default withRouter(connect(state => ({
    collapsed: state.root.app.get('collapsed'),
    isMobile: state.root.app.get('isMobile'),
    drawerVisible:state.root.app.get('drawerVisible'),
}))(Besider));
